<template>
	<view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
		<uni-section title="工单信息" type="line" padding>
			<uni-steps :options="list1" :active="active" />
			<uni-card title="操作记录" :thumbnail="avatar">
				<!-- <text>1111{{ deviceInform.name }}</text> -->
				<view style="display: flex; flex-direction: column" v-for="(item, index) in OrderInfoList" :key="index">
					<text>订单号：{{ item.oid }}</text>
					<text>创建人：{{ item.createBy }}</text>
					<text>最新操作时间：{{ item.updateTime }}</text>
					<text>备注：{{ item.remark }}</text>
				</view>
			</uni-card>
		</uni-section>
		<uni-card title="工单信息" :thumbnail="avatar">
			<view class="order-txt">
				<text class="">标题：{{ cusinform.title }}</text>
				<text class="">内容：{{ cusinform.content }}</text>
				<text class="">创建人：{{ cusinform.defaultAddress.userName }}</text>
				<text class="">联系电话：{{ cusinform.defaultAddress.phone }}</text>
				<text class="">订单号：{{ cusinform.orderNum }}</text>
				<text class="">创建时间：{{ cusinform.createTime }}</text>
			</view>
		</uni-card>

		<uni-card v-show="deviceShow" title="设备档案" :thumbnail="avatar">
			<view class="order-txt">
				<text class="">设备名称：{{ deviceInform.name }}</text>
				<text class="">类型：{{ deviceInform.deviceClass.typeName }}</text>
				<text class="">创建人：{{ deviceInform.createBy }}</text>
				<text class="">工厂：{{ deviceInform.manufacturer }}</text>
				<text class="">创建时间：{{ deviceInform.createTime }}</text>
			</view>
		</uni-card>
		<uni-card v-show="cusinform.state == 3 || cusinform.state == 4 || cusinform.state == 5" title="维修信息" :thumbnail="avatar">
			<view class="order-txt">
				<text class="">维修人：{{ cusinform.serviceName }}</text> 
				<text class="">故障原因：{{ cusinform.cause }}</text>
				<text class="">创建人：{{ cusinform.defaultAddress.userName }}</text>
				<text class="">联系电话：{{ cusinform.servicephonenumber }}</text>
				<text class="">处理时间：{{ cusinform.updateTime }}</text>
				<text class="">维修图片：</text>
				<u-album :urls="SerImgsData"></u-album>
			</view>
		</uni-card>
		<!-- <u--text text="uView UI" type="primary" bold size="17"></u--text> -->
		<u-album :urls="imgsData"></u-album>
		<!-- <u-album :urls="videoData"></u-album> -->
		<view v-show="voiceShow" class="page-section page-section-gap" style="text-align: center">
			<WzsAudio :music="voiceSrc" :autoplay="true"></WzsAudio>
			<!-- <audio style="text-align: left" :src="voiceSrc" :poster="cusinform.poster" :name="current.name" author="暂无" :action="audioAction" controls></audio> -->
		</view>
		<view v-show="videoShow">
			<video v-for="item in videoData" id="myVideo" :src="item" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
		</view>
		<uni-section title="评价工单" type="line" v-show="cusinform.state == 4 && reMarkshow">
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
					<uni-forms-item label="评价标题" label-width="80px"  label-align="right"   required name="title">
						<uni-easyinput v-model="valiFormData.title" placeholder="请输入评价标题" />
					</uni-forms-item>
					<uni-forms-item label="评价内容" label-width="80px"  label-align="right"   name="introduction" required>
						<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入评价内容" />
					</uni-forms-item>
					<uni-forms-item label="评价星级" label-width="80px" label-align="right"   required name="remark">
						<uni-rate :value="valiFormData.remark" @change="changeRemark" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('valiForm')">提交</button>
			</view>
		</uni-section>
	</view>
</template>

<script>
import { getdeviceInfo, getOrderInfoList, Orederevaluate } from '@/api/system/user.js';
import WzsAudio from '@/components/WZS-Audio/WZS-Audio.vue';
import store from '@/store/index.js';
import { title } from 'process';
export default {
	components: {
		WzsAudio
	},
	data() {
		return {
			active: 0,
			deviceShow: true,
			videoShow: true,
			voiceShow: true,
			reMarkshow: true,
			deviceInform: '',
			type: 'center',
			msgType: 'success',
			messageText: '这是一条成功提示',
			voiceSrc: '',
			videoData: [],
			imgsData: [],
			SerImgsData: [],
			cusinform: '',
			OrderInfoList: '',
			value: '',
			list1: [
				{
					title: '待派发'
				},
				{
					title: '待处理'
				},
				{
					title: '处理中'
				},
				{
					title: '待评价'
				},
				{
					title: '已完结'
				}
			],
			remark: 4,
			valiFormData: {
				title: '',
				remark: 0,
				introduction: ''
			},
			rules: {
				title: {
					rules: [
						{
							required: true,
							errorMessage: '评价标题不能为空！'
						}
					]
				},
				introduction: {
					rules: [
						{
							required: true,
							errorMessage: '评价内容不能为空！'
						}
					]
				}
			}
		};
	},
	watch: {
		voiceShow(newval, oldval) {
			console.log('newval', newval);
			console.log('oldval', oldval);
		}
	},
	onLoad() {
		setTimeout(() => {
			this.getDetail();
		}, 500);
	},
	methods: {
		getDetail() { 
			this.cusinform = store.state.CusImform; 
			this.getInfoList();
			this.voiceSrc = this.cusinform.voice;
			this.voiceSrc ? '' : (this.voiceShow = false);
			console.log('this.voiceSrc', this.voiceSrc);
			this.active = this.cusinform.state - 1;
			if (this.cusinform.deviceId == null) {
				this.deviceShow = false;
				this.msgType = 'error';
				this.messageText = `该工单没有绑定设备！`;
				this.$refs.message.open();
			} else {
				getdeviceInfo(this.cusinform.deviceId).then((res) => {
					this.deviceInform = res.data;
					console.log('res:', res.data);
				});
			}
			if (!this.cusinform.video) {
				this.videoShow = false;
			} else if (this.cusinform.video.indexOf(',') > -1) {
				this.cusinform.video.split(',').map((t) => {
					this.videoData.push(t);
					console.log('this.videoData');
				});
			} else {
				this.videoData[0] = this.cusinform.video;
			}
			if (!this.cusinform.picture) {
				// this.videoShow = false;
			} else if (this.cusinform.picture.indexOf(',') > -1) {
				this.cusinform.picture.split(',').map((t) => {
					this.imgsData.push(t);
					// console.log('this.imgsData', this.imgsData);
				});
			} else {
				this.imgsData[0] = this.cusinform.picture;
			}
			if (!this.cusinform.servicePicture) {
				// this.videoShow = false;
			} else if (this.cusinform.servicePicture.indexOf(',') > -1) {
				this.cusinform.servicePicture.split(',').map((t) => {
					this.SerImgsData.push(t);
					// console.log('this.imgsData', this.imgsData);
				});
			} else {
				this.SerImgsData[0] = this.cusinform.servicePicture;
			}
		},
		async getInfoList() {
			await getOrderInfoList(this.cusinform.orderNum).then((res) => {
				this.OrderInfoList = res.data;
				console.log('this.OrderInfoList:', this.OrderInfoList);
			});
		},
		changeRemark(e) {
			this.valiFormData.remark = e.value;
			console.log('remark:', e);
		},
		submit() {
			this.$refs.valiForm
				.validate()
				.then((res) => {
					let data = {
						id: this.cusinform.id,
						oid: this.cusinform.orderNum,
						title: res.title,
						content: res.introduction,
						state: 5,
						remark: res.remark
					};
					Orederevaluate(data).then((response) => {
						console.log(response);
						this.msgType = 'success';
						this.messageText = `提交成功`;
						this.$refs.message.open();
						this.reMarkshow = false;
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					});
					console.log('表单数据信息：', data);
				})
				.catch((err) => {
					console.log('表单错误信息：', err);
				});
		}
	}
};
</script>

<style lang="scss">
.order-txt {
	display: flex;
	flex-direction: column;
}
</style>